<template>
	<div class="user-card">
		<div
			class="user-card-img"
			:style="{
				background: `url(${avatarImg}) no-repeat`,
				backgroundSize: '100% auto',
				backgroundPosition: 'left',
			}"
		></div>
		<div class="user-card-content">
			<div class="fc">
				<p class="f24 title">{{ nowData.title }}</p>
				<small class="text-white" :class="getTipClass(item)" v-for="(item, index) in tipList" :key="index">{{ model[item.prop] }} </small>
			</div>

			<ul class="user-card-tag flex">
				<li v-for="(item, index) in tagList" :key="index" class="mr8">
					<el-tag v-if="item.custome == 'tag' && (model[item.prop] || item.value)" :type="item.type">{{ model[item.prop] || item.value }}</el-tag>
          <span v-else class="text-span integrity-btn" :style="item.style||{}">{{ item.label }}: {{ model[item.prop] }}</span>
				</li>
         <li v-if="integrityValue"  class="integrity-btn">
           <el-popover
							effect="dark"
							:popper-style="{ background: 'rgba(0,0,0,0.6)' }"
							placement="bottom"
							title=""
							:width="400"
              :disabled="integrityValue=='100%'"
							trigger="click"
							@show="getIntegrityLack"
						>
							<div v-show="lackContent">
								<p class="text-bold f16">未填字段（必填）</p>
								<p>{{ lackContent }}</p>
							</div>
							<div v-show="lackMaterialContent">
								<p class="text-bold f16">未填资料（必填）</p>
								<p>{{ lackMaterialContent }}</p>
							</div>
							<template #reference>
								<p>
									<span class="mr8">材料完整度</span> <span>{{ integrityValue }}</span>
								</p>
							</template>
						</el-popover>
          </li>
			</ul>
		</div>

		<div class="user-card-operate">
			<el-button
				v-for="(item, index) in nowData.menuBtn"
				:key="index"
				v-auth="[item.auth]"
				:type="item.type"
				:plain="item.plain"
				@click="handleOperate(item)"
			>
				{{ item.label }}
			</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import bus from '@/utils/eventbus'
import defaultImg from '@/assets/imgs/default_header_logo.webp'
import { DowloadPreviewImage } from '@/utils/util'
import apiMod from '@/apiMod/index'
import { useCommonStore } from '@/stores/common'

const { dictList } = storeToRefs(useCommonStore())
const props = defineProps<{
	title?: string
	avatar?: string
	pageName?: string
	tipList?: any
	tagList?: any
	menuBtn?: any
	model?: any
	whickComm?: string
  integrityConfig?: any
}>()

const emit = defineEmits(['change'])
const integrityValue = ref('')
const lackContent = ref('')
const lackMaterialContent = ref('')
const nowData = computed({
	get() {
		return {
			title: props.model[props.title],
			avatar: props.model[props.avatar],
			tipList: props.tipList,
			tagList: props.tagList,
			menuBtn: ['Archives', 'detail'].includes(props.whickComm) ? props.menuBtn : [],
			model: props.model,
		}
	},
	set() {},
})

const avatarImg = ref('')
const getPreviewImage = async () => {
	const src = nowData.value.avatar || defaultImg
	let imgUrl = ''
	if (src.includes('ningxiang')) {
		const previewUrl = (await DowloadPreviewImage(src)) as string
		imgUrl = previewUrl
	} else {
		imgUrl = src
	}
	avatarImg.value = imgUrl
	return imgUrl
}

const getTipClass = (item) => {
	const tip = item.dicData?.filter((item) => item.label == props.model[item.prop])[0]
	return 'tip-success'
}
const handleOperate = (item) => {
	if (item.operate !== 'delete') {
		emit('change', item)
		return
	}
	bus.emit('menu-operate', {
		...item,
		pageName: props.pageName,
	})
}
watch(
	() => props.model,
	() => {
		getPreviewImage()
	},
	{
		immediate: true,
	}
)


const getInitData = ()=> {
  apiMod.view_integrity({
    ...props.integrityConfig,
    soleValue: props.model[props.integrityConfig.soleValue]
  }).then(res=> {
    integrityValue.value = res.data
  })
}
// 获取完整度必填字段
const getIntegrityLack = () => {
	let dictData = []
	switch (props.integrityConfig.baseTableName) {
		case 'dp_service_org_base':
			dictData = dictList.value['ORG_MATERIAL_TYPE']||[]
			break
		default:
			break
	}
	const soleValue = props.model[props.integrityConfig.soleValue]
	apiMod
		.view_integrity_lack({
			...props.integrityConfig,
			soleValue,
		})
		.then((res) => {
			const data = res.data
      const materialList = dictData.map(item=> {
        if(data.material.includes(item.value)) {
          return item.label
        }
      }).filter(Boolean)
      lackContent.value = (data.field||[]).join('、')
      lackMaterialContent.value = materialList.join('、')
		})
}
onMounted(() => {
  setTimeout(() => {
    if(props.integrityConfig)	getInitData()
  }, 50);
})

onUnmounted(() => {
	bus.off('menu-operate')
})
</script>

<style scoped lang="scss">
.integrity-btn {
	background: #DEFFE0;
	padding: 2px 4px;
	border-radius: 5px;
	font-weight: 600;
	color: #00EB10;
}
.tip-success {
	position: relative;
	margin-left: 30px;

	&::before {
		content: '';
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #06c270;
		top: 50%;
		left: -14px;
	}
}
.tip-error {
	position: relative;
	margin-left: 30px;

	&::before {
		content: '';
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #e90101;
		top: 50%;
		left: -14px;
	}
}

.user-card {
	height: 190px;
	position: relative;
	z-index: 0;
	&::before {
		content: '';
		background-color: transparent;
		background: url('@/assets/imgs/headerLeft.webp') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		width: 90%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
	}
	&-img {
		width: 60%;
		height: 190px;
		overflow: hidden;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 0;
		min-width: 665px;
		border-top-right-radius: 8px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	&-tag {
		margin-left: 30px;
	}
	&-content {
		color: #fff;
		position: absolute;
		left: 40px;
		bottom: 20px;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// width: 45%;
		.title {
			font-weight: 700;
			max-width: 30rem;
		}
	}
	&-operate {
		position: absolute;
		right: 40px;
		bottom: 20px;
		z-index: 1;
	}
}
</style>
